<template class="firstpage">
  <div class="categroy_page">
    <div class="page_tree">
      <div class="input-suffix">
        <span>查找：</span>
        <el-input v-model="filterText" />
      </div>
      <el-tree
        ref="categoryTree"
        class="filter-tree"
        :class="[ customData.treeData.length != 0 ? 'isScroll' : '']"
        :data="customData.treeData"
        node-key="categoryId"
        :default-expanded-keys="customData.defaultExpandKeys"
        :props="customData.defaultProps"
        :render-content="renderContent"
        :filter-node-method="filterNode"
        :highlight-current="true"
        @node-click="handleNodeClick"
      />
    </div>
    <div v-if="customData.isCreate1" class="page_content">
      <h4>基本信息</h4>
      <div class="detail_content">
        <el-row :gutter="20">
          <el-col :span="8">分类名称：{{ customData.categroyDetail.categoryName }}</el-col>
          <el-col :span="11">叶子节点：{{ customData.categroyDetail.isLeaf == 0 ? '否' : '是' }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">创建人：{{ customData.categroyDetail.createUser }}</el-col>
          <el-col :span="11">创建时间：{{ customData.categroyDetail.createTime }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">最后更新人：{{ customData.categroyDetail.lastModifyUser }}</el-col>
          <el-col :span="11">最后更新时间：{{ customData.categroyDetail.lastModifyTime }}</el-col>
        </el-row>
        <el-row :gutter="8">
          <el-col :span="11">版本号：{{ customData.categroyDetail.versionNo }}</el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="20" :offset="14">
            <el-button v-if="customData.categroyDetail.enableFlag == 0 && customData.categroyDetail.id != ''" type="primary" size="small" @click="onDeleteFn">删除</el-button>
            <el-button v-if="customData.categroyDetail.enableFlag == 1 && customData.categroyDetail.id != ''" size="small" @click="onDisable">停用</el-button>
            <el-button v-if="customData.categroyDetail.enableFlag == 0 && customData.categroyDetail.id != ''" size="small" @click="onEnable">启用</el-button>
            <el-button v-if="customData.categroyDetail.id != ''" type="primary" size="small" @click="onUpdateCategroy">编辑</el-button>
            <el-button v-if="customData.categroyDetail.isLeaf == 0" type="primary" size="small" @click="onAddCategroy">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="customData.iscadeDataInfo && customData.categroyDetail.isLeaf !== 0" class="attr_content">
        <h4>属性列表</h4>
        <el-row type="flex" class="row-bg" justify="space-between">
          <el-col :span="16">
            <div>
              <el-select v-model="customData.selectVal" placeholder="请选择" size="small" @change="selectValFn">
                <el-option value="1" label="全部选中">全部选中</el-option>
                <el-option value="0" label="全部取消">全部取消</el-option>
                <el-option value="2" label="全部切换">全部切换</el-option>
              </el-select>
              <el-button type="primary" size="small" @click="attrOnUpLoadUpdate">编辑</el-button>
              <el-button v-if="customData.multipleSelection.length != 0" size="small" @click="onDelete">删除</el-button>
              <el-button v-else size="small" disabled>删除</el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div style="text-align: right;">
              <el-button type="primary" size="small" @click="onCreatGroup">属性分组管理</el-button>
              <el-button type="primary" size="small" @click="onUpdateAttribute">添加</el-button>
            </div>
          </el-col>
        </el-row>
        <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="50" label="序号" />
          <el-table-column prop="attrName" label="属性名称">
            <template slot-scope="scope">
              <span v-if="scope.row.attrName" class="attrEditor" @click="attrEditor_detail(scope.row)">{{ scope.row.attrName }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="attrAliasName" label="属性别名">
            <template slot-scope="scope">
              <span v-if="scope.row.attrAliasName" class="attrEditor" @click="attrEditor_detail(scope.row)">{{ scope.row.attrAliasName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="属性分组">
            <template slot-scope="scope">
              <el-select v-model="scope.row.groupId" @change="groupListselect($event,scope.row.groupId)">
                <!--                                <el-select v-model="scope.row.groupName" @change="groupListselect($event,scope.row.groupId)">-->

                <el-option
                  v-for="item in customData.groupList"
                  :key="item.id"
                  :label="item.groupName"
                  :value="item.id"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="类型分类">
            <template slot-scope="scope">
              <span v-if="scope.row.attrType == 1">分类属性</span>
              <span v-if="scope.row.attrType == 2">分组属性</span>
              <span v-if="scope.row.attrType == 3">个性属性</span>
              <span v-if="scope.row.attrType == 0">基本属性</span>
              <span v-if="scope.row.attrType == 4">一般属性</span>
            </template>
          </el-table-column>
          <el-table-column prop="isMustEnter" label="是否必填">
            <template slot-scope="scope">
              <span v-if="scope.row.isMustEnter == 0">否</span>
              <span v-if="scope.row.isMustEnter == 1">是</span>
            </template>
          </el-table-column>
          <el-table-column prop="editType" label="类型">
            <template slot-scope="scope">
              <span v-if="scope.row.editType == 0">
                <span v-if="scope.row.valueType === 0">文本类型</span>
                <span v-if="scope.row.valueType === 1">数字类型</span>
              </span>
              <span v-if="scope.row.editType == 1">单选</span>
              <span v-if="scope.row.editType == 2">多选</span>
            </template>
          </el-table-column>
          <el-table-column prop="isVisible" label="是否在App显示" width="130px">
            <template slot-scope="scope">
              <span v-if="scope.row.isVisible == 1">前后台均不可见</span>
              <span v-if="scope.row.isVisible == 2">仅后台可见</span>
              <span v-if="scope.row.isVisible == 3">前后台均可见</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div v-if="customData.isCreate2" class="page_attrContent">
      <h4>基本信息</h4>
      <div class="attr_info">
        <el-row>
          <el-col :span="4">所属分类00：</el-col>
          <el-col :span="8">{{ customData.categroyDetail.categoryName }}</el-col>
          <el-col v-if="customData.categroyDetail.parentId" :span="4">父分类名称：</el-col>
          <el-col v-if="customData.categroyDetail.parentId" :span="8">{{ customData.categroyDetail.parentName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span style="color: red">*</span>属性中文名称：</el-col>
          <el-col :span="8"><el-input v-model="customData.categoryAttrCreate.attrName" /></el-col>
        </el-row>
        <el-row>
          <el-col :span="4"><span style="color: red">*</span>属性中文别名：</el-col>
          <el-col :span="8"><el-input v-model="customData.categoryAttrCreate.attrAliasName" /></el-col>
        </el-row>
        <el-row>
          <el-col :span="4">属性类型：</el-col>
          <el-col :span="8">{{ attrType }}</el-col>
        </el-row>
        <el-row v-if="customData.categoryAttrStatus == '1'">
          <el-col :span="4">输入方式：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.type" @change="changeTypeVal($event)">
              <el-radio :label="3">文本</el-radio>
              <el-radio :label="4">数值</el-radio>
              <el-radio :label="1">单选/下拉框</el-radio>
              <el-radio :label="2">多选</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row v-else>
          <el-col :span="4">输入方式：</el-col>
          <el-col v-if="customData.categoryAttrCreate.type == 3" :span="8" @change="changeTypeVal(3)">文本</el-col>
          <el-col v-if="customData.categoryAttrCreate.type == 4" :span="8" @change="changeTypeVal(4)">数值</el-col>
          <el-col v-if="customData.categoryAttrCreate.type == 1" :span="8" @change="changeTypeVal(1)">单选/下拉框</el-col>
          <el-col v-if="customData.categoryAttrCreate.type == 2" :span="8" @change="changeTypeVal(2)">多选</el-col>
        </el-row>
        <el-row>
          <el-col :span="4">跟随中文自动填充：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.autoFill">
              <el-radio label="1" :disabled="customData.categoryAttrCreate.type == 3 ? false :true">是</el-radio>
              <el-radio label="0" :disabled="customData.categoryAttrCreate.type == 3 ? false :true">否</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否必填：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.isMustEnter">
              <el-radio label="1">必填项</el-radio>
              <el-radio label="0">非必填项</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否导购属性：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.isGuideAttr">
              <el-radio label="0">不是</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否系列属性：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.isSeriesAttr">
              <el-radio label="0">不是</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否描述属性：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.isDescAttr">
              <el-radio label="0">不是</el-radio>
              <el-radio label="1">是</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4">是否在前台显示：</el-col>
          <el-col :span="20">
            <el-radio-group v-model="customData.categoryAttrCreate.isVisible">
              <el-radio label="1">前后台均不可见</el-radio>
              <el-radio label="2">仅后台可见</el-radio>
              <el-radio label="3">前后台均可见</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" style="text-align: right;">
            <el-button type="primary" size="small" @click="onSave">保存</el-button>&nbsp;&nbsp;&nbsp;&nbsp;
            <el-button size="small" @click="attrCall_back">返回</el-button>
          </el-col>
        </el-row>
      </div>
      <div v-if="customData.isAttrList" class="choose_info">
        <div v-if="!customData.isEditAttr">
          <!-- 创建 -->
          <h4>选项信息：</h4>
          <el-row>
            <el-col :span="4">属性值中文名称：</el-col>
            <el-col :span="8"><el-input v-model="customData.chooseVal" size="small" @keyup.13.native="attrChooseFn" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="4">属性值英文名称：</el-col>
            <el-col :span="8"><el-input v-model="customData.chooseEval" size="small" @keyup.13.native="attrChooseFn" /></el-col>
            <el-col :span="2"><el-button type="primary" size="small" @click="attrChooseFn">添加</el-button></el-col>
          </el-row>
          <el-row>
            <el-col :span="4">选项列表：</el-col>
            <el-col :span="10">
              <div v-for="(item, index) in customData.categoryAttrCreate.attrValueNameList" :key="index" class="attr_box">
                <el-tooltip class="item" effect="dark" placement="top-start">
                  <div slot="content">{{ item.valueName }}</div>
                  <div class="listInfo">
                    <label>{{ item.valueName }}</label>/
                  </div>
                </el-tooltip>
                <i class="el-icon-close" @click="detail_attrValueNameList(item)" />
              </div>
            </el-col>
          </el-row>
        </div>
        <!-- 编辑 -->
        <div v-else>
          <h4>选项信息：</h4>
          <el-row>
            <el-col :span="4">属性值中文名称：</el-col>
            <el-col :span="8"><el-input v-model="customData.chooseVal" size="small" @keyup.13.native="attrChooseFn" /></el-col>
          </el-row>
          <el-row>
            <el-col :span="4">属性值英文名称：</el-col>
            <el-col :span="8"><el-input v-model="customData.chooseEval" size="small" @keyup.13.native="attrChooseFn" /></el-col>
            <el-col :span="2"><el-button type="primary" size="small" @click="attrChooseFn">添加</el-button></el-col>
          </el-row>
          <h4>选项列表：</h4>
          <el-row>
            <el-col v-if="customData.categoryAttrCreate.type == 2 || customData.categoryAttrCreate.type == 1" :span="20">
              <ul v-if="customData.categoryAttrCreate.attrValueNameList" class="todo_list">
                <li v-for="(item, index) in customData.categoryAttrCreate.attrValueNameList" :key="index" class="todo rel">
                  <el-tooltip class="item" effect="dark" placement="top-start">
                    <div slot="content">属性值中文名称:{{ item.valueName }}</div>
                    <div class="listInfo">
                      <label>{{ item.valueName }}</label>
                    </div>
                  </el-tooltip>
                  <div class="viewEditor abs" :class="{editorComputed: customData.edtorTodes === item}">
                    <span>属性值中文名称：</span>
                    <input
                      v-model="customData.editorUploadVal"
                      type="text"
                      @keyup.13="categoryAttrValueUpdate(item)"
                      @blur="valueNameBlur(customData.editorUploadVal, item)"
                    >
                    <span>属性值英文名称：</span>
                    <input
                      v-model="customData.editorUploadEval"
                      type="text"
                    >
                    <div class="btn abs">
                      <button type="text" @click="categoryAttrValueUpdate(item)">保存</button>
                      <button type="text" @click="categoryAttrValueCancle">取消</button>
                    </div>
                  </div>
                  <button type="text" class="editorBtn abs" @click="edtorTodeUpdate(item)">编辑</button>
                  <i class="el-icon-close abs" @click="categoryAttrValueDelete(item)" />
                </li>
              </ul>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <el-dialog :title="dialogData.title" :visible.sync="dialogData.centerDialogVisible" width="50%" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item v-if="customData.categroyDetail.isLeaf == 1" label="所属分类">
          <label>{{ customData.categroyDetail.categoryName }}</label>
        </el-form-item>
        <el-form-item label="分类名称" prop="categoryName">
          <el-input v-model="form.categoryName" />
        </el-form-item>
        <el-form-item label="是否叶子节点" prop="categoryLevel" label-width="110px">
          <el-radio v-model="form.categoryLevel" label="1">是</el-radio>
          <el-radio v-model="form.categoryLevel" label="0">否</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="comminPutCategroy('form')">确 定</el-button>
          <el-button @click="dialogData.centerDialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="新增分类属性分组" :visible.sync="dialogData.createdGroup" width="50%" center>
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="demo-ruleForm">
        <el-form-item label="分类属性分组名称" prop="groupName" label-width="20%" required>
          <el-input v-model="form.groupName" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onAddGroup('form')">确 定</el-button>
          <el-button @click="dialogData.createdGroup = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog title="删除分类" :visible.sync="dialogData.isCancle" center width="50%" :before-close="cancle">
      <el-row>
        <el-col :span="4">分类名称:</el-col>
        <el-col :span="14">{{ customData.categroyDetail.categoryName }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="4">关联商品数量:</el-col>
        <el-col :span="14">{{ customData.isNum }}</el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <p style="color:#f00">确定删除当前分类？</p>
          <p style="color:#f00">删除后，该分类下的相关子分类及属性都将被删除，并处理已关联商品。</p>
        </el-col>
      </el-row>
      <el-row style="text-align:right">
        <el-col>
          <el-button type="primary" size="small" @click="onSure">确定删除</el-button>
          <el-button plain size="small" @click="cancle">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import _validate from '../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../framework/commonJs/wptx_tools'
import _api from '../../../../framework/API/basedata'
import { PAGER } from '@/framework/commonTemplate/'
const _FUNCTION_NAME = ''
export default {
  components: { PAGER },
  directives: {
    'focus': {
      update(el, binding) {
        if (binding.value) {
          el.focus()
        }
      }
    }
  },
  filters: {},
  data() {
    return {
      tableData: [],
      searchData: {
      },
      searchDataBuffer: {
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {
        title: '',
        centerDialogVisible: false,
        createdGroup: false,
        isCancle: false
      },
      historyData: {},
      infoData: {},
      filterText: '',
      customData: {
        treeData: [],
        defaultExpandKeys: [],
        defaultProps: {
          children: 'childTreeDto',
          label: 'categoryName'
        },
        isCreate1: false,
        isCreate2: false,
        categoryAttrStatus: '',
        categroyDetail: {},
        categoryIdNum: '',
        multipleSelection: [],
        selectVal: '',
        isEditAttr: false, // 属性编辑
        chooseVal: '', // 属性值中文名称
        chooseEval: '', // 属性值中英文名称
        categoryAttrCreate: {// 分类属性
          attrName: '', // 属性名称
          attrAliasName: '', // 属性别名
          attrType: '', // 属性类型 如：1：分类属性；2：分组属性；3：个性属性;0:基本属性；4：一般属性（可以被别人继承）
          isMustEnter: '1', // 是否必填 ： 1：必填 0否
          autoFill: '0', // 跟随中文自动填充：0:否 1:是 ,
          type: '',
          editType: '', // 编辑类型，0：文本类型1:下拉列表类型（单选）2：多选框（多选）
          valueType: '', // 属性值的类型，0：文本类型1：数字类型
          isGuideAttr: '0', // 是否导购属性：1：是 0：不是
          isSeriesAttr: '0', // 是否系列属性：1：是 0：不是
          isDescAttr: '0', // 是否描述属性：1：是 0：不是
          isVisible: '3', // 是否可见 1前后台均不可见 2仅后台可见 3前后台均可见
          attrValueNameList: [
            {
              valueName: ''
            }
          ]
        },
        edtorTodes: '', // 正在编辑的中文属性值
        editorUploadEval: '', // 正在编辑的中文属性值
        editorUploadVal: '',
        iscadeDataInfo: false,
        isAttrList: false,
        isCancleData: [],
        isNum: 0,
        brandNameData: [],
        brandIds: []
      },
      form: {
        categoryName: '',
        categoryLevel: '',
        groupName: ''
      },
      rules: {
        categoryName: [
          { required: true, message: '请输入分类名称', trigger: 'blur' }
        ],
        categoryLevel: [
          { required: true, message: '请选择叶子节点' }
        ],
        groupName: [
          { required: true, message: '请输入分类属性分组名称', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    attrType() { // 分类属性
      var attrTxt = ''
      if (this.customData.categoryAttrCreate.attrType == '' || this.customData.categoryAttrCreate.attrType == 1) {
        attrTxt = '分类属性'
        this.customData.categoryAttrCreate.attrType = '1'
      } else if (this.customData.categoryAttrCreate.attrType == 2) {
        attrTxt = '分组属性'
        this.customData.categoryAttrCreate.attrType = '2'
      } else if (this.customData.categoryAttrCreate.attrType == 3) {
        attrTxt = '个性属性'
        this.customData.categoryAttrCreate.attrType = '3'
      } else if (this.customData.categoryAttrCreate.attrType == 0) {
        attrTxt = '基本属性'
        this.customData.categoryAttrCreate.attrType = '0'
      } else if (this.customData.categoryAttrCreate.attrType == 4) {
        attrTxt = '一般属性（可以被别人继承）'
        this.customData.categoryAttrCreate.attrType = '4'
      }
      return attrTxt
    }
  },
  watch: {
    filterText(val) {
      this.$refs.categoryTree.filter(val)
    }
  },
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit() {
      const self = this
      const params = {
      }
      _api.categroyTree_list(self, params, self.callBack_categroyTreeList)
    },
    onSearch() {
      const self = this
    },
    onChangePage(data) {
      const self = this
    },
    onReset(data) {
      const self = this
    },
    onAddCategroy() {
      const self = this
      self.dialogData.centerDialogVisible = true
      self.dialogData.title = '分类新增'
      self.form.categoryName = ''
      self.form.categoryLevel = ''
    },
    onDelete(data) {
      const self = this
      self.$confirm('确定要删除该分类属性吗', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const num = []
        let params = {}
        self.customData.multipleSelection.forEach(item => {
          num.push(item.masterCategoryAttrId)
        })
        params = {
          masterCategoryId: self.customData.categroyDetail.id,
          attrIds: num
        }
        _api.categoryAttrDeleteByIds(self, params, self.callBack_categoryAttrDeleteByIds)
      }).catch(() => {
        _validate.openTip(self, '已取消删除', 'info')
      })
    },
    onDeleteFn() {
      const self = this; let params = { categoryIds: [] }
      params = {
        categoryIds: [self.customData.categroyDetail.id]
      }
      self.dialogData.isCancle = true
      _api.categroyCheck(self, params, self.callBack_categroyCheck)
    },
    onSure() {
      const self = this; let params = { categoryIds: [] }
      params = {
        categoryIds: [self.customData.categroyDetail.id]
      }
      _api.categroyDelete(self, params, self.callBack_brandDelete)
    },
    onInfo(data) {
      const self = this
    },
    onUpdateCategroy(data) {
      const self = this
      self.form.categoryName = self.customData.categroyDetail.categoryName
      self.form.categoryLevel = self.customData.categroyDetail.isLeaf.toString()
      self.dialogData.centerDialogVisible = true
      self.dialogData.title = '编辑分类'
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable() {
      const self = this
      let title = ''
      if (self.customData.categroyDetail.isLeaf === 0) { // 1是 0否
        title = '停用当前分类时，下属所有子分类会全部停用，您确定要【停用】？'
      } else if (self.customData.categroyDetail.isLeaf === 1) {
        title = '您确定要停用当前分类？'
      }
      self.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          id: self.customData.categroyDetail.id
        }
        _api.categroyDisEnable(self, params, self.callBack_onDisable)
      }).catch(() => {
        _validate.openTip(self, '已取消停用', 'info')
      })
    },
    onEnable() {
      const self = this
      let title = ''
      if (self.customData.categroyDetail.isLeaf === 0) { // 1是 0否
        title = '启用当前分类时，下属所有子分类会全部启用，您确定要【启用】？'
      } else if (self.customData.categroyDetail.isLeaf === 1) {
        title = '您确定要启用当前分类？'
      }
      self.$confirm(title, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          id: self.customData.categroyDetail.id
        }
        _api.categroyEnable(self, params, self.callBack_onable)
      }).catch(() => {
        _validate.openTip(self, '已取消启用', 'info')
      })
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_categroyTreeList(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '分类获取超时，请稍后重试', 'warning')
      } else {
        self.customData.treeData = [
          {
            categoryId: '0',
            categoryName: '所有分类',
            isLeaf: '0',
            childTreeDto: data.data
          }
        ]
        self.customData.defaultExpandKeys = [self.customData.treeData[0].categoryId]
        self.customData.isCreate1 = false
        self.customData.isCreate2 = false
      }
    },
    callBack_categroyDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '详情获取超时，请稍后重试', 'warning')
      } else {
        self.customData.categroyDetail = data.data
      }
    },
    callBack_groupList(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.groupList = data.data
      }
    },
    callBack_onDisable(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '停用超时，请稍后重试', 'warning')
      } else {
        _validate.openTip(self, '停用成功', 'success')
        _tools.reset(self.customData.categroyDetail)
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        self.onInit()
      }
    },
    callBack_onable(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '启用超时，请稍后重试', 'warning')
      } else {
        _validate.openTip(self, '启用成功', 'success')
        _tools.reset(self.customData.categroyDetail)
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        self.onInit()
      }
    },
    callBack_categroyQueryAttrByCategoryId(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.iscadeDataInfo = true
        self.tableData = data.data
      }
    },
    callBack_categoryAttrDetail(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        self.customData.isCreate2 = true
        self.customData.categoryAttrStatus = '0' // 0是编辑  1是创建
        self.customData.isCreate1 = false
        if (data.data.editType == 1 || data.data.editType == 2) {
          self.customData.isAttrList = true
          self.customData.isEditAttr = true
          self.customData.categoryAttrCreate.type = data.data.editType
        } else {
          if (data.data.valueType == '0') {
            self.customData.categoryAttrCreate.type = 3
          } else {
            self.customData.categoryAttrCreate.type = 4
          }
        }
        self.customData.categoryAttrCreate.attrName = data.data.attrName
        self.customData.categoryAttrCreate.attrAliasName = data.data.attrAliasName
        self.customData.categoryAttrCreate.attrType = data.data.attrType + ''
        self.customData.categoryAttrCreate.isDescAttr = data.data.isDescAttr + ''
        self.customData.categoryAttrCreate.isExtends = data.data.isExtends + ''
        self.customData.categoryAttrCreate.isMustEnter = data.data.isMustEnter + ''
        self.customData.categoryAttrCreate.autoFill = data.data.autoFill + ''
        self.customData.categoryAttrCreate.isSeriesAttr = data.data.isSeriesAttr + ''
        self.customData.categoryAttrCreate.isVisible = data.data.isVisible + ''
        self.customData.categoryAttrCreate.valueType = data.data.valueType + ''
        self.customData.categoryAttrCreate.isGuideAttr = data.data.isGuideAttr + ''
        self.customData.categoryAttrCreate.attrValueNameList = data.data.attrValueList
      }
    },
    callBack_groupAttrUpdate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '获取超时，请稍后重试', 'warning')
      } else {
        _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
      }
    },
    callBack_categoryAttrDeleteByIds(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '删除超时，请稍后重试', 'warning')
      } else {
        _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
        _tools.reset(self.customData.categroyDetail)
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        self.onInit()
      }
    },
    callBack_groupCreate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '添加超时，请稍后重试', 'warning')
      } else {
        self.dialogData.createdGroup = false
        _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
      }
    },
    callBack_categoryAttrCreate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '保存超时，请稍后重试', 'warning')
      } else {
        self.customData.isCreate1 = true
        self.customData.isCreate2 = false
        self.customData.isAttrList = false
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
      }
    },
    callBack_categoryAttrUpdate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '编辑超时，请稍后重试', 'warning')
      } else {
        self.customData.isCreate1 = true
        self.customData.isCreate2 = false
        self.customData.isAttrList = false
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
      }
    },
    callBack_categroyCreate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '创建超时，请稍后重试', 'warning')
      } else {
        self.dialogData.centerDialogVisible = false
        if (self.customData.iscadeDataInfo) {
          _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
        }
      }
    },
    callBack_categroyUpdate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '编辑超时，请稍后重试', 'warning')
      } else {
        self.dialogData.centerDialogVisible = false
        _api.categroyDetail(self, self.customData.categoryIdNum, self.callBack_categroyDetail)
      }
    },
    callBack_categoryAttrValueCreate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.customData.attrDataList = {
          valueName: self.customData.chooseVal
        }
        if (self.customData.categoryAttrCreate.attrValueNameList == '') {
          self.customData.categoryAttrCreate.attrValueNameList = []
        }
        self.customData.categoryAttrCreate.attrValueNameList.push(self.customData.attrDataList)
        self.customData.chooseVal = ''
        self.customData.chooseEval = ''
        const set = new Set(self.customData.categoryAttrCreate.attrValueNameList)
        const newArr = Array.from(set)
        self.customData.categoryAttrCreate.attrValueNameList = newArr
        _api.categoryAttrDetail(self, self.customData.editorVal, self.callBack_categoryAttrDetail)
      }
    },
    callBack_categoryAttrValueUpdate(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _api.categoryAttrDetail(self, self.customData.editorVal, self.callBack_categoryAttrDetail)
      }
    },
    callback_categoryAttrValueDelete(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        _api.categoryAttrDetail(self, self.customData.editorVal, self.callBack_categoryAttrDetail)
      }
    },
    callBack_categroyCheck(res) {
      if (res == null) {
        return false
      }
      const self = this
      if (res.code == 200) {
        if (_validate.checkListEmpty(res.result.data.data.masterCategoryCasItem)) {
          self.customData.isCancleData = []
          self.customData.isNum = 0
        } else {
          self.customData.isCancleData = res.result.data.data.masterCategoryCasItem
          self.customData.isNum = res.result.data.data.masterCategoryCasItem.length
        }
      } else {
        _tools.openTip(self, res.message, 'error')
      }
    },
    callBack_brandDelete(res) {
      if (res == null) {
        return false
      }
      const self = this
      if (res.code == 200) {
        _tools.openTip(self, '删除成功', 'success')
        self.dialogData.isCancle = false
        self.customData.brandIds = []
        self.customData.isCancleData = []
        self.customData.isNum = 0
        _tools.reset(self.customData.categroyDetail)
        self.onInit()
      } else {
        _tools.openTip(self, res.message, 'error')
      }
    },
    handleNodeClick(data, node) {
      const self = this
      self.customData.isCreate1 = true
      self.customData.isCreate2 = false
      self.customData.multipleSelection = []
      if (data.categoryId === '0') {
        self.customData.iscadeDataInfo = false
        self.customData.categroyDetail = {
          id: '',
          categoryName: '所有分类',
          isLeaf: 0,
          createUser: '系统管理员',
          createTime: '2020-04-20 11:36:58',
          lastModifyTime: '2020-04-20 11:36:58',
          lastModifyUser: '系统管理员',
          versionNo: '1'
        }
      } else {
        self.customData.isAttrList = false
        self.customData.categoryIdNum = data.categoryId
        _api.categroyDetail(self, data.categoryId, self.callBack_categroyDetail)
        _api.categroyQueryAttrByCategoryId(self, data.categoryId, self.callBack_categroyQueryAttrByCategoryId)
        _api.groupList(self, data.categoryId, self.callBack_groupList)
      }
    },
    comminPutCategroy(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          if (self.dialogData.title == '分类新增') {
            const params = {
              categoryLevel: self.customData.categroyDetail.categoryLevel ? (Number(self.customData.categroyDetail.categoryLevel) + 1) : 1,
              categoryName: self.form.categoryName,
              enableFlag: self.customData.categroyDetail.enableFlag, // 启用状态 0:禁用；1：启用
              isLeaf: self.form.categoryLevel, // 是否叶子节点 0:否 1:是
              parentId: self.customData.categroyDetail.id // 父ID
            }
            _api.categroyCreate(self, params, self.callBack_categroyCreate)
          } else {
            const params = {
              categoryLevel: self.customData.categroyDetail.categoryLevel ? self.customData.categroyDetail.categoryLevel : 1,
              categoryName: self.form.categoryName,
              enableFlag: self.customData.categroyDetail.enableFlag, // 启用状态 0:禁用；1：启用
              isLeaf: self.form.categoryLevel, // 是否叶子节点 0:否 1:是
              parentId: self.customData.categroyDetail.parentId, // 父ID
              id: self.customData.categroyDetail.id
            }
            _api.categroyUpdate(self, params, self.callBack_categroyUpdate)
          }
        } else {
          return false
        }
      })
    },
    handleSelectionChange(val) {
      this.customData.multipleSelection = val
    },
    attrEditor_detail(data) {
      const self = this
      const params = data.masterCategoryAttrId
      self.customData.editorVal = data.masterCategoryAttrId
      self.customData.masterCategoryId = data.masterCategoryId
      _api.categoryAttrDetail(self, params, self.callBack_categoryAttrDetail)
    },
    groupListselect(event, GroupAttrId) {
      const self = this
      const params = {
        id: GroupAttrId,
        masterCategoryGroupId: event
      }
      console.log(params)
      _api.groupAttrUpdate(self, params, self.callBack_groupAttrUpdate)
    },
    selectValFn() {
      const self = this
      const data = self.tableData
      const selectVal = self.customData.selectVal
      if (selectVal === '1' || selectVal === '2') {
        data.forEach(row => {
          self.$refs.multipleTable.toggleRowSelection(row)
        })
      } else if (selectVal === '0') {
        data.forEach(row => {
          self.$refs.multipleTable.clearSelection(row)
        })
      }
    },
    attrOnUpLoadUpdate() {
      const self = this
      const num = []
      const masterCategoryId = []
      let params = ''
      if (self.customData.multipleSelection.length == 0) {
        _validate.openTip(self, '请选择要编辑的属性', 'warning')
      } else if (self.customData.multipleSelection.length >= 2) {
        _validate.openTip(self, '只能选择编辑一个属性哦', 'warning')
      } else {
        self.customData.multipleSelection.forEach(item => {
          num.push(item.masterCategoryAttrId)
          masterCategoryId.push(item.masterCategoryId)
        })
        params = num.join('')
        if (params) {
          self.customData.editorVal = params
          self.customData.masterCategoryId = masterCategoryId.join('')
          _api.categoryAttrDetail(self, params, self.callBack_categoryAttrDetail)
        } else {
          _validate.openTip(self, '请选择要编辑的属性', 'warning')
        }
      }
    },
    onCreatGroup() {
      const self = this
      self.dialogData.createdGroup = true
      self.form.groupName = ''
      self.$nextTick(function() {
        self.$refs['form'].resetFields()
      })
    },
    onUpdateAttribute() {
      const self = this
      self.customData.isCreate2 = true
      self.customData.categoryAttrStatus = '1' // 0是编辑  1是创建
      self.customData.isCreate1 = false
      self.customData.isEditAttr = false
      self.defaultPropsFn()
    },
    /* 增加属性分组 */
    onAddGroup(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            groupName: self.form.groupName,
            groupSort: 0
          }
          _api.groupCreate(self, params, self.callBack_groupCreate)
        } else {
          return false
        }
      })
    },
    attrCall_back() {
      const self = this
      const params = ''
      self.customData.isAttrList = false
      self.customData.isCreate1 = true
      self.customData.isCreate2 = false
      self.customData.isDetailAttr = true
      _api.categroyQueryAttrByCategoryId(self, self.customData.categoryIdNum, self.callBack_categroyQueryAttrByCategoryId)
      _api.groupList(self, self.customData.categoryIdNum, self.callBack_groupList)
      self.customData.multipleSelection = []
      self.defaultPropsFn()
      _tools.reset(self.customData.chooseVal)
      _tools.reset(self.customData.chooseEval)
    },
    defaultPropsFn() {
      const self = this
      self.customData.categoryAttrCreate = {
        attrName: '',
        attrAliasName: '',
        attrType: '',
        editType: '',
        isDescAttr: '0',
        isGuideAttr: '0',
        isMustEnter: '1',
        autoFill: '',
        isSeriesAttr: '0',
        isVisible: '3',
        masterCategoryId: '',
        platformId: '',
        valueType: '',
        attrValueNameList: []
      }
    },
    changeTypeVal(value) {
      const self = this
      self.customData.categoryAttrCreate.autoFill = ''
      if (value == 4) {
        self.customData.isAttrList = false
        self.customData.categoryAttrCreate.editType = '0'
        self.customData.categoryAttrCreate.valueType = '1'
        self.customData.chooseVal = ''
        self.customData.chooseEval = ''
        self.customData.categoryAttrCreate.autoFill = '1'
      } else if (value == 3) {
        self.customData.categoryAttrCreate.editType = '0'
        self.customData.categoryAttrCreate.valueType = '0'
        self.customData.isAttrList = false
      } else {
        self.customData.isAttrList = true
        self.customData.isEditAttr = false
        self.customData.categoryAttrCreate.autoFill = '0'
        self.customData.categoryAttrCreate.editType = value
      }
      self.customData.categoryAttrCreate.attrValueNameList = []
    },
    onSave() {
      const self = this
      if (self.customData.categoryAttrCreate.attrName == '') {
        self.$message({
          type: 'warning',
          message: '请输入属性名称'
        })
        return
      }

      if (self.customData.categoryAttrCreate.attrAliasName == '') {
        self.$message({
          type: 'warning',
          message: '请输入属性别名'
        })
        return
      }
      const params = {
        attrName: self.customData.categoryAttrCreate.attrName, // 属性名称
        attrAliasName: self.customData.categoryAttrCreate.attrAliasName, // 属性别名
        parentName: self.customData.categroyDetail.parentName, // fu
        attrType: self.customData.categoryAttrCreate.attrType, // 属性类型 如：1：分类属性；2：分组属性；3：个性属性;0:基本属性；4：一般属性（可以被别人继承）
        isDescAttr: self.customData.categoryAttrCreate.isDescAttr, // 是否描述属性：1：是 0：不是
        isGuideAttr: self.customData.categoryAttrCreate.isGuideAttr, // 是否导购属性：1：是 0：不是
        isMustEnter: self.customData.categoryAttrCreate.isMustEnter, // 是否必填 ： 1：必填 0否
        isSeriesAttr: self.customData.categoryAttrCreate.isSeriesAttr, // 是否系列属性：1：是 0：不是
        isVisible: self.customData.categoryAttrCreate.isVisible, // 是否可见 1前后台均不可见 2仅后台可见 3前后台均可见
        masterCategoryId: self.customData.categroyDetail.id // master_cateogory表主键ID
      }
      if (self.customData.categoryAttrCreate.type == 3) {
        params.valueType = 0
        params.editType = 0
        if (_validate.checkEmpty(self.customData.categoryAttrCreate.autoFill)) {
          self.$message({
            type: 'warning',
            message: '请选择是否跟随中文自动填充'
          })
          return false
        } else {
          params.autoFill = self.customData.categoryAttrCreate.autoFill
        }
      } else if (self.customData.categoryAttrCreate.type == 4) {
        params.valueType = 1
        params.editType = 0
        params.autoFill = '1'
        self.customData.categoryAttrCreate.autoFill = '1'
      } else {
        params.editType = self.customData.categoryAttrCreate.type
        params.autoFill = '0'
        self.customData.categoryAttrCreate.autoFill = '0'
      }
      if (self.customData.categoryAttrStatus === '1') {
        if (self.customData.categoryAttrCreate.type == 1 || self.customData.categoryAttrCreate.editType == 2) {
          if (self.customData.categoryAttrCreate.attrValueNameList.length == 0) {
            self.$message({
              type: 'warning',
              message: '请添加选项列表'
            })
            return false
          }
        }
        const num = []
        self.customData.categoryAttrCreate.attrValueNameList.forEach(item => {
          num.push({ 'valueName': item.valueName })
        })
        params.attrValueNameList = num || []// 选项列表
        _api.categoryAttrCreate(self, params, self.callBack_categoryAttrCreate)
      } else {
        params.id = self.customData.editorVal
        _api.categoryAttrUpdate(self, params, self.callBack_categoryAttrUpdate)
      }
    },
    attrChooseFn() {
      const self = this
      if (_validate.checkEmpty(self.customData.chooseVal) && _validate.checkEmpty(self.customData.chooseEval)) {
        self.$message({
          type: 'warning',
          message: '选项信息属性值中文名称或英文名称不能为空'
        })
      } else {
        if (self.customData.chooseVal.length > 50) {
          _validate.openTip(self, '该文本最多可输入50个字符', 'warning')
          return
        }
        if (!self.customData.isEditAttr) {
          let status = true
          for (let i = 0; i < self.customData.categoryAttrCreate.attrValueNameList.length; i++) {
            if (self.customData.chooseVal == self.customData.categoryAttrCreate.attrValueNameList[i].valueName) {
              status = false
              break
            }
          }
          if (!status) {
            _validate.openTip(self, '分类属性值已存在', 'waring')
            return
          }
          self.customData.attrDataList = {
            valueName: self.customData.chooseVal
          }
          if (self.customData.categoryAttrCreate.attrValueNameList == '') {
            self.customData.categoryAttrCreate.attrValueNameList = []
          }
          self.customData.categoryAttrCreate.attrValueNameList.push(self.customData.attrDataList)
          self.customData.chooseVal = ''
          self.customData.chooseEval = ''
        } else {
          const params = {
            masterCategoryAttrId: self.customData.editorVal,
            masterCategoryId: self.customData.masterCategoryId,
            valueName: self.customData.chooseVal
          }
          _api.categoryAttrValueCreate(self, params, self.callBack_categoryAttrValueCreate)
        }
      }
    },
    categoryAttrValueUpdate(data) {
      const self = this
      const params = {
        id: data.id,
        masterCategoryAttrId: data.masterCategoryAttrId,
        masterCategoryId: data.masterCategoryId,
        valueName: self.customData.editorUploadVal != '' ? self.customData.editorUploadVal : self.customData.editorUploadVal
      }
      _api.categoryAttrValueUpdate(self, params, self.callBack_categoryAttrValueUpdate)
    },
    valueNameBlur(data, item) {
      const self = this
      if (data == item.valueName) {
        self.customData.edtorTodes = ''
      } else {
        self.categoryAttrValueUpdate(item)
      }
    },
    categoryAttrValueCancle() {
      const self = this
      self.customData.edtorTodes = ''
    },
    edtorTodeUpdate(todo) {
      const self = this
      self.customData.edtorTodes = todo
      self.customData.editorUploadVal = todo.valueName
    },
    categoryAttrValueDelete(data) {
      const self = this
      const params = data.id
      _api.categoryAttrValueDelete(self, params, self.callback_categoryAttrValueDelete)
    },
    detail_attrValueNameList(data) {
      const self = this
      const indexAttr = self.customData.categoryAttrCreate.attrValueNameList.indexOf(data)
      self.customData.categoryAttrCreate.attrValueNameList.splice(indexAttr, 1)
    },
    renderContent(h, { node, data, store }) {
      if (data.enableFlag == 0) {
        return <span>{data.categoryName}<span style='color:red;'>(停用)</span></span>
      } else {
        return <span>{data.categoryName}</span>
      }
    },
    /* 过滤树节点*/
    filterNode(value, data) {
      if (!value) return true
      return data.categoryName.indexOf(value) !== -1
    },
    cancle() {
      const self = this
      self.dialogData.isCancle = false
      self.customData.brandIds = []
      self.customData.isCancleData = []
      self.customData.isNum = 0
    }
  }
}
</script>

<style lang="scss" scoped>
    .categroy_page{
        width: 96%;
        height: 100%;
        display: flex;
        margin: 30px 2%;
        min-height:700px;
        .page_tree{
            border-radius: 4px;
            border: 1px solid #f3f3f3;
            background-color: #fff;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            width: 30%;
            display: flex;
            flex-direction: column;
            margin-right: 1%;
            padding-bottom: 20px;
            .categroy{
                line-height: 0;
                margin-bottom: 10px;
                color: #5d5d5d;
                padding: 0 2%;
                font-weight: 400;
                cursor: pointer;
            }
            .input-suffix{
                width: 96%;
                padding: 10px 2%;
                display: flex;
                align-items: center;
                &>span{
                    width: 20%;
                    background: #fff;
                }
            }
            .el-tree {
                padding: 0 2%;
            }
            .isScroll{
                max-height: 900px;
                overflow: hidden;
                overflow-y: scroll;
            }
        }
        .page_content, .page_attrContent{
            flex: 1;
            border-radius: 4px;
            padding: 0 2% 20px;
            border: 1px solid #f3f3f3;
            background-color: #fff;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
            display: flex;
            flex-direction: column;
            .detail_content{
                width: 100%;
            }
            .attr_content，.attr_info{
                width: 100%;
                margin-top: 10px;
                border-top: 1px solid #ccc;
            }
        }
        .page_attrContent{
            .attr_info{
                border-top: none;
                margin: 0 0 10px;
                padding: 0 0 10px;
                border-bottom: 1px solid #ccc;
            }
        }
    }
    .el-row {
        margin: 0 0 20px;
        &:last-child {
            margin-bottom: 0;
        }
    }
    .attr_box{
        width: auto;
        border: 1px solid #ccc;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        position: relative;
        margin-bottom: 10px;
        i.el-icon-close{
            position: absolute;
            right: 5px;
            top: 8px;
            cursor: pointer;
        }
    }
    .rel{
        position: relative;
    }
    .abs{
        position: absolute;
    }
    .todo_list{
        list-style: none;
        padding: 0;
        margin: 0 0 10px;
        li.todo{
            border: 1px solid #ccc;
            padding: 0 5px;
            height: 30px;
            margin: 0 0 10px;
            line-height: 30px;
            button.editorBtn{
                position: absolute;
                right: 30px;
                top: 5px;
                outline: none;
                border: none;
                background: 0;
                cursor: pointer;
                color: #1890ff;
                margin-left: 10px;
            }
            i.el-icon-close{
                right: 5px;
                top: 8px;
                cursor: pointer;
            }
            .viewEditor{
                display: none;
                left: 5px;
                top: 0px;
                margin: 2px 0px;
                line-height: 24px;
                width: 90%;
                &>input{
                    width: 65%;
                }
                .btn{
                    right: 0;
                    top: 0;
                }
            }
            .editorComputed{
                display: block;
                left: 5px;
                top: 0px;
                margin: 2px 0px;
                line-height: 24px;
                width: 90%;
                z-index: 99;
                background: #fff;
                &>input{
                    width: 30%;
                }
                .btn{
                    right: 0;
                    top: 0;
                }
            }
        }
    }
    .attrEditor{
        color: #1890ff;
        cursor: pointer;
    }
    .listInfo{
        width: 86%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
</style>
